import React, { useState } from 'react';
import { Button, Input } from 'antd-mobile';
import './index.css';

interface ChatInputProps {
  onSend: (message: string) => void;
  disabled?: boolean;
}

const ChatInput: React.FC<ChatInputProps> = ({ onSend, disabled = false }) => {
  const [inputValue, setInputValue] = useState('');

  const handleSend = () => {
    if (inputValue.trim() && !disabled) {
      onSend(inputValue.trim());
      setInputValue('');
    }
  };

  const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      handleSend();
    }
  };

  return (
    <div className="chat-input">
      <div className="input-container">
        <Input
          value={inputValue}
          onChange={setInputValue}
          onKeyDown={handleKeyPress}
          placeholder="请输入您的问题..."
          disabled={disabled}
          className="message-input"
        />
        <Button
          onClick={handleSend}
          disabled={!inputValue.trim() || disabled}
          color="primary"
          className="send-button"
        >
          发送
        </Button>
      </div>
    </div>
  );
};

export default ChatInput;

